<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Expires" content="0">
	<script type="text/javascript" src="/Public/js/jquery.js"></script>
	<script type="text/javascript" src="/Public/js/jquery-1.8.3.min.js"></script>
	<link rel="Stylesheet" type="text/css" href="/Public/css/loginDialog.css" />
	<title>后台登录</title>
	<link href="/Public/css/login.css" type="text/css" rel="stylesheet">
</head>
<body>
<style>
	#loginbox{
		margin: 150px auto 0 auto;
		min-height: 420px;
		max-width: 420px;
		padding: 40px;
		background-color: #ffffff;
		margin-left: auto;
		margin-right: auto;
		border-radius: 4px;
		/* overflow-x: hidden; */
		box-sizing: border-box;
	}
	.cd{
		border: 1px solid #DCDEE0;
		vertical-align: middle;
		border-radius: 3px;
		height: 50px;
		font-size: 14px;
		outline: none;
		cursor:pointer ;
	}
	.modal-content {
		position: relative;
		background-color: #fff;
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
		border: 1px solid #999;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 6px;
		outline: 0;
		-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
		box-shadow: 0 3px 9px rgba(0,0,0,.5);
	}
</style>


<div class="login">
	<div class="message">中山学院-选课系统</div>
	<div id="darkbannerwrap"></div>
	<form method="post">
		<input name="action" value="login" type="hidden">
		<input name="username" maxlength="13" placeholder="学号" required="" type="text">
		<hr class="hr15">
		<input name="password" placeholder="密码" required="" type="password">
		<hr class="hr15">
		<div class="yzm">
			<input name="code" class="code" placeholder="请输入验证码" style="width: 50%" required="" type="text">
			<img class="cd" style="width:45%; "  src="{:U('createCode')}">
		</div>
		<hr class="hr15">
		<input class="send" value="登录" style="width:100%;" type="button">
		<hr class="hr20">
		<!-- 帮助 <a onClick="alert('请联系管理员')">忘记密码</a> -->
	</form>
</div>

<a href="#" id="example">测试</a>

<div id="LoginBox">
	<div class="row1">
		登录DIY账号窗口<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>
	</div>
	<div class="row">
		用户名: <span class="inputBox">
                <input type="text" id="txtName" placeholder="账号/邮箱" />
            </span><a href="javascript:void(0)" title="提示" class="warning" id="warn">*</a>
	</div>
	<div class="row">
		密&nbsp;&nbsp;&nbsp;&nbsp;码: <span class="inputBox">
                <input type="text" id="txtPwd" placeholder="密码" />
            </span><a href="javascript:void(0)" title="提示" class="warning" id="warn2">*</a>
	</div>
	<div class="row">
		<a href="#" id="loginbtn">登录</a>
	</div>
</div>

<script type="text/javascript">
	$(function ($) {
		//弹出登录
		$("#example").hover(function () {
			$(this).stop().animate({
				opacity: '1'
			}, 600);
		}, function () {
			$(this).stop().animate({
				opacity: '0.6'
			}, 1000);
		}).on('click', function () {
			$("body").append("<div id='mask'></div>");
			$("#mask").addClass("mask").fadeIn("slow");
			$("#LoginBox").fadeIn("slow");
		});
		//
		//按钮的透明度
		$("#loginbtn").hover(function () {
			$(this).stop().animate({
				opacity: '1'
			}, 600);
		}, function () {
			$(this).stop().animate({
				opacity: '0.8'
			}, 1000);
		});
		//文本框不允许为空---按钮触发
		$("#loginbtn").on('click', function () {
			var txtName = $("#txtName").val();
			var txtPwd = $("#txtPwd").val();
			if (txtName == "" || txtName == undefined || txtName == null) {
				if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
					$(".warning").css({ display: 'block' });
				}
				else {
					$("#warn").css({ display: 'block' });
					$("#warn2").css({ display: 'none' });
				}
			}
			else {
				if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
					$("#warn").css({ display: 'none' });
					$(".warn2").css({ display: 'block' });
				}
				else {
					$(".warning").css({ display: 'none' });
				}
			}
		});
		//文本框不允许为空---单个文本触发
		$("#txtName").on('blur', function () {
			var txtName = $("#txtName").val();
			if (txtName == "" || txtName == undefined || txtName == null) {
				$("#warn").css({ display: 'block' });
			}
			else {
				$("#warn").css({ display: 'none' });
			}
		});
		$("#txtName").on('focus', function () {
			$("#warn").css({ display: 'none' });
		});
		//
		$("#txtPwd").on('blur', function () {
			var txtName = $("#txtPwd").val();
			if (txtName == "" || txtName == undefined || txtName == null) {
				$("#warn2").css({ display: 'block' });
			}
			else {
				$("#warn2").css({ display: 'none' });
			}
		});
		$("#txtPwd").on('focus', function () {
			$("#warn2").css({ display: 'none' });
		});
		//关闭
		$(".close_btn").hover(function () { $(this).css({ color: 'black' }) }, function () { $(this).css({ color: '#999' }) }).on('click', function () {
			$("#LoginBox").fadeOut("fast");
			$("#mask").css({ display: 'none' });
		});
	});
</script>

<div class="copyright">© power by<a href="#" target="_blank">someone</a></div>
<script>
	//等待dom树加载完后执行
	$(document).ready(function() {
		/**
		 * 点击验证码刷新
		 */
		$(".cd").click(function () {
			var verifyURL = "{:U('createCode','','')}";
			var time = new Date().getTime();
			$(".cd").attr({
				"src": verifyURL + "/" + time
			});
		});
		/**
		 *ajax发送登录请求
		 */
		$(".send").click(function (){
			$.ajax({
				type: "post",
				url: "{:U('login_check')}",
				data:getJson(),
				success:function (msg,status) {
					//根据状态做对应的操作

				}
			});
		});
	})
	/**
	 * 包装需要发送的json数据
	 */
	function getJson() {
		var json = {
			'user_id': $('').val(),
			'password': $('').val(),
		}
	}
</script>
